<template>
	<view>
		<!-- 头部选择 -->
		<view class="tab flex tc tb p-tb-25 bc-w">
			<view v-for="(item, index) in orderStatus" :class="'col-' + orderStatus.length" @tap="setTab(index)">
				<view :class="orderStatusIndex === index ? 'selectColor' : ''">
					{{ item.name }}
					<view class="line" :class="orderStatusIndex === index ? 'backColor' : ''"></view>
				</view>
			</view>
		</view>

		<!-- item内容 -->
		<view class="order-list p-tb-30">
			<view class="item br-10 m-lr-30 m-b-30 p-30 p-t bc-w" v-for="item in filteredList" :key="item.id">
				<view class="flex">
					<view class="">
						订单号：{{ item.order_number }}
					</view>
					<view class="m-l-auto tb orderStatus">
						{{ getOrderStatusName(item.deposit_status) }}
					</view>
				</view>
				<view class="item-list m-t-30">
					<view class="item-list p-tb-30">
						<view class="l ovh br-10">
							<image src="https://www.tennoir.ltd/assets/addons/xyvenue/imgs/logo.png" mode=""></image>
						</view>
						<view class="r psr m-l-20">
							<view class="tb lh-40 m-t-10">
								{{ item.package.package_name }}
							</view>
							<view class="venue m-t-10">
								<!-- Venue info here if applicable -->
							</view>
							<view class="date m-t-40 ts-26">
								<text>下单时间：</text>
								<text>{{ item.created_at }}</text>
							</view>
							<view class="price-box flex psa lh-32 m-t-10">
								<text>定金￥</text>
								<text>2000元</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom flex p-20 m-t-30">
					<view class="">
						合计：¥{{ item.total_price }}
					</view>
					<view class="m-l-auto lh-30 flex"
						@tap="$xyfun.to('/pages/user/franOrder/detail?id='+item.order_number+'&type=order')">
						订单详情
						<text class="xyicon icon-right"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderStatus: [{
						value: "all",
						name: "全部"
					},
					{
						value: 0,
						name: "待付定金"
					},
					{
						value: 1,
						name: "已付定金"
					},
					{
						value: 3,
						name: "已取消"
					}
				],
				orderStatusIndex: 0,
				itemList: [],
				filteredList: [],
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			// 获取数据
			loadData() {
				this.$api.post({
					url: "/join_orders/getUserOrders",
					loadingTip: "加载中...",
					data: {
						user_id: uni.getStorageSync("xyvenue:user").id
					},
					success: res => {
						this.itemList = res;
						this.setTab(this.orderStatusIndex); // 默认根据状态筛选
					}
				});
			},
			// 设置当前选中的订单状态
			setTab(index) {
				this.orderStatusIndex = index;
				if (index === 0) {
					this.filteredList = this.itemList; // 显示所有订单
				} else {
					const status = this.orderStatus[index].value; // 获取状态的值
					this.filteredList = this.itemList.filter(item => String(item.deposit_status) === String(
					status)); // 保证类型一致
				}
			},

			// 获取订单状态名称
			getOrderStatusName(status) {
				const statusMap = {
					0: "待付定金",
					1: "已付定金",
					3: "已取消"
				};
				return statusMap[status] || "未知状态";
			}
		}
	};
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
		flex-wrap: wrap;
	}

	.selectColor {
		color: #65c61d;
	}

	.line {
		height: 4rpx;
		width: 60rpx;
		margin: 10rpx auto 0;
	}

	.backColor {
		background-color: #65c61d;
	}

	.orderStatus {
		color: #65c61d;
	}

	.item-list {
		border-color: #f7f7f7;
		display: flex;

		.l {
			width: 150rpx;
			height: 150rpx;

			image {
				vertical-align: middle;
				width: 150rpx;
				height: 150rpx;
			}
		}

		.psr {
			position: relative;
			width: 460rpx;

			.date {
				color: #808080;
			}

			.price-box {
				font-weight: bold;
				position: absolute;
				right: 0;
				top: 0;

				text {
					color: #ff5335;
				}
			}
		}
	}

	.bottom {
		color: #808080;
		background-color: #f7f7f7;
		align-items: center;

		.m-l-auto {
			color: #65c61d;
		}
	}

	.tab {
		margin-bottom: 30rpx;
	}

	.col-4 {
		width: 25%;
	}

	.col-3 {
		width: 33.33%;
	}

	.col-2 {
		width: 50%;
	}

	.col-1 {
		width: 100%;
	}

	.tc {
		text-align: center;
	}

	.tb {
		display: flex;
		justify-content: flex-start;
		align-items: center;

	}

	.p-tb-25 {
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}

	.bc-w {
		background-color: white;
	}

	.psa {
		position: absolute;
	}

	.lh-40 {
		line-height: 40rpx;
	}

	.ts-26 {
		font-size: 26rpx;
	}

	.m-t-10 {
		margin-top: 10rpx;
	}

	.m-t-30 {
		margin-top: 30rpx;
	}

	.m-t-40 {
		margin-top: 40rpx;
	}
</style>